<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<!-- 
文字跑马灯  每隔0.5s让txt最后一个文字跑到txt最前面去
 -->

<body>
    <h3>每300毫秒切换背景颜色,直到通过clearInterval来停止</h3>

    <script>

        let h3 = document.getElementsByTagName('h3')[0]
        let t = setInterval(() => {
            let txt = h3.innerText
            h3.innerText = txt.substring(txt.length - 1) + txt.substring(0, txt.length - 1)
        }, 500)

        //  5s之后清除定时器
        setTimeout(() => {
            clearInterval(t)
        }, 5000)
    </script>
</body>

</html>